<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内地</title>
    <style>
        ul,li,dl,dt,dd,.circle,.triangle {
            margin: 0;
            padding: 0; 
        }

        ul {
            width: 1100px;
            margin: 0 auto;
        }

        li {
            list-style: none;
            clear: both;
        }

        dl {
            float: left;
            width: 200px;
            height: 300px;
            margin: 10px;
        }

        dd {
            margin-left: 0;
        }
        /* dt{
            
            overflow: hidden;
        } */
        
        img {
            width: 200px;
            height: 200px;
            /* width: 100%; */
            position: relative;
        }

        .circle {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            border-color: #ccc;
            background-color: rgb(255, 255, 255);
            position: absolute;
            top: 68px;
            left: 68px;
            display: none;

        }

        .triangle {
            width: 0px;
            height: 0px;
            border: #696969 solid 18px;
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            position: absolute;
            top: 85px;
            left: 95px;

            display: none;
        }

        dt:hover {
            transform: translateY(-8px);
            transition: 0.6s linear;
            cursor: pointer;


        }

        dt:hover .circle {
            display: block;
        
        }

        dt:hover .triangle {
            display: block;
           
        }
        a{
            text-decoration: none;
        }
        .a1{
            color: #000;
        }
        .a2{color: #A9A9A9;}
        a:hover{
            color: #90EE90;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <dl>
                <dt>
                    <img src="image/1-1.png" alt="">
                    <p class="circle">
                    <p class="triangle"></p>
                    </p>

                </dt>
                <dd><a href="#" class="a1">You Don't Know Me</a></dd>
                <dd ><a href="#" class="a2">G.E.M 邓紫棋 / 王者荣耀</a></dd>
                <dd style="color: 	#A9A9A9;">2021-07-27</dd>
            </dl>
            <dl>
                <dt><img src="image/1-2.png" alt="">
                    <p class="circle">
                    <p class="triangle"></p>
                    </p>
                </dt>
                <dd><a href="#" class="a1">后来的你我</a></dd>
                <dd><a href="#" class="a2">傅颖</a></dd>
                <dd style="color: 	#A9A9A9;">2021-07-27</dd>
            </dl>
            <dl>
                <dt><a href="aa1.html"><img src="image/1-3.png" alt=""></a>
                    <p class="circle">
                    <p class="triangle"></p>
                    </p>
                </dt>
                <dd><a href="#" class="a1">野摩托</a></dd>
                <dd><a href="#" class="a2">洛天依</a></dd>
                <dd style="color: 	#A9A9A9;">2021-07-27</dd>
            </dl>
            <dl>
                <dt><img src="image/1-4.png" alt="">
                    <p class="circle">
                    <p class="triangle"></p>
                    </p>
                </dt>
                <dd><a href="#" class="a1">Gin Lee合唱情歌集</a></dd>
                <dd><a href="#" class="a2">李幸倪</a></dd>
                <dd style="color: 	#A9A9A9;">2021-07-26</dd>
            </dl>
            <dl>
                <dt><img src="image/1-5.png" alt="">
                    <p class="circle">
                    <p class="triangle"></p>
                    </p>
                </dt>
                <dd><a href="#" class="a1">That Metro Kid那个地铁小子：Foward Without</a></dd>
                <dd><a href="#" class="a2"></a>G.E.M邓紫棋/王者荣耀</dd>
                <dd style="color: 	#A9A9A9;">2021-07-27</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>
                    <img src="https://y.qq.com/music/photo_new/T002R300x300M0000049o6mB2qvxRJ.jpg?max_age=2592000" alt="">
                    <p class="circle">
                    <p class="triangle"></p>
                    </p>

                </dt>
                <dd><a href="#" class="a1">宁夏</a></dd>
                <dd ><a href="#" class="a2">欧阳娜娜</a></dd>
                <dd style="color: 	#A9A9A9;">2021-07-27</dd>
            </dl>
            <dl>
                <dt><img src="https://y.qq.com/music/photo_new/T002R300x300M000000pNUfi1ZDw9S.jpg?max_age=2592000" alt="">
                    <p class="circle">
                    <p class="triangle"></p>
                    </p>
                </dt>
                <dd><a href="#" class="a1">KOKOBRAND</a></dd>
                <dd><a href="#" class="a2">葛兆恩Kodii</a></dd>
                <dd style="color: 	#A9A9A9;">2021-07-27</dd>
            </dl>
            <dl>
                <dt><img src="https://y.qq.com/music/photo_new/T002R300x300M000002X0Z4F2riVS9.jpg?max_age=2592000" alt="">
                    <p class="circle">
                    <p class="triangle"></p>
                    </p>
                </dt>
                <dd><a href="#" class="a1">光阴独白</a></dd>
                <dd><a href="#" class="a2">徐佳莹</a></dd>
                <dd style="color: 	#A9A9A9;">2021-07-27</dd>
            </dl>
            <dl>
                <dt><img src="https://y.qq.com/music/photo_new/T002R300x300M000000TMAng0k57aI_1.jpg?max_age=2592000" alt="">
                    <p class="circle">
                    <p class="triangle"></p>
                    </p>
                </dt>
                <dd><a href="#" class="a1">为梦想而飞</a></dd>
                <dd><a href="#" class="a2">黄品源</a></dd>
                <dd style="color: 	#A9A9A9;">2021-07-26</dd>
            </dl>
            <dl>
                <dt><img src="https://y.qq.com/music/photo_new/T002R300x300M000001l0he73oRhGe.jpg?max_age=2592000" alt="">
                    <p class="circle">
                    <p class="triangle"></p>
                    </p>
                </dt>
                <dd><a href="#" class="a1">博弈论</a></dd>
                <dd><a href="#" class="a2"></a>Pandora樂隊</dd>
                <dd style="color: 	#A9A9A9;">2021-07-27</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>
                    <img src="https://y.qq.com/music/photo_new/T002R300x300M000003SL8994Owhq8.jpg?max_age=2592000" alt="">
                    <p class="circle">
                    <p class="triangle"></p>
                    </p>

                </dt>
                <dd><a href="#" class="a1">来者何人n！</a></dd>
                <dd ><a href="#" class="a2">Lara梁心颐</a></dd>
                <dd style="color: 	#A9A9A9;">2021-07-27</dd>
            </dl>
            <dl>
                <dt><img src="https://y.qq.com/music/photo_new/T002R300x300M000000clcWz0fS5PB.jpg?max_age=2592000" alt="">
                    <p class="circle">
                    <p class="triangle"></p>
                    </p>
                </dt>
                <dd><a href="#" class="a1">藏</a></dd>
                <dd><a href="#" class="a2">欧阳娜娜</a></dd>
                <dd style="color: 	#A9A9A9;">2021-07-27</dd>
            </dl>
            <dl>
                <dt><img src="https://y.qq.com/music/photo_new/T002R300x300M000002UuHHK1faoA7.jpg?max_age=2592000" alt="">
                    <p class="circle">
                    <p class="triangle"></p>
                    </p>
                </dt>
                <dd><a href="#" class="a1">心心念念</a></dd>
                <dd><a href="#" class="a2">杨宗纬</a></dd>
                <dd style="color: 	#A9A9A9;">2021-07-27</dd>
            </dl>
            <dl>
                <dt><img src="https://y.qq.com/music/photo_new/T002R300x300M000003iVLPZ4DtxbA_1.jpg?max_age=2592000" alt="">
                    <p class="circle">
                    <p class="triangle"></p>
                    </p>
                </dt>
                <dd><a href="#" class="a1">般配</a></dd>
                <dd><a href="#" class="a2">提拉小米</a></dd>
                <dd style="color: 	#A9A9A9;">2021-07-26</dd>
            </dl>
            <dl>
                <dt><img src="https://y.qq.com/music/photo_new/T002R300x300M000003OxKE31vpAMG.jpg?max_age=2592000" alt="">
                    <p class="circle">
                    <p class="triangle"></p>
                    </p>
                </dt>
                <dd><a href="#" class="a1">灵感先生</a></dd>
                <dd><a href="#" class="a2">方大同</a></dd>
                <dd style="color: 	#A9A9A9;">2021-07-27</dd>
            </dl>
        </li>
        <li>
            <li>
                <dl>
                    <dt>
                        <img src="https://y.qq.com/music/photo_new/T002R300x300M000003GfwRp0zAYE8.jpg?max_age=2592000" alt="">
                        <p class="circle">
                        <p class="triangle"></p>
                        </p>
    
                    </dt>
                    <dd><a href="#" class="a1">大决战 影视原声带</a></dd>
                    <dd ><a href="#" class="a2">王力宏 /谭维维
                    </a></dd>
                    <dd style="color: 	#A9A9A9;">2021-07-27</dd>
                </dl>
                <dl>
                    <dt><img src="https://y.qq.com/music/photo_new/T002R300x300M000001jAa3937rw60_1.jpg?max_age=2592000" alt="">
                        <p class="circle">
                        <p class="triangle"></p>
                        </p>
                    </dt>
                    <dd><a href="#" class="a1">我们不Chok</a></dd>
                    <dd><a href="#" class="a2">ERROR</a></dd>
                    <dd style="color: 	#A9A9A9;">2021-07-27</dd>
                </dl>
                <dl>
                    <dt><img src="https://y.qq.com/music/photo_new/T002R300x300M000000tkQrH1gq62w_1.jpg?max_age=2592000" alt="">
                        <p class="circle">
                        <p class="triangle"></p>
                        </p>
                    </dt>
                    <dd><a href="#" class="a1">总会再见</a></dd>
                    <dd><a href="#" class="a2">陈洁仪</a></dd>
                    <dd style="color: 	#A9A9A9;">2021-07-27</dd>
                </dl>
                <dl>
                    <dt><img src="image/1-4.png" alt="">
                        <p class="circle">
                        <p class="triangle"></p>
                        </p>
                    </dt>
                    <dd><a href="#" class="a1">Gin Lee合唱情歌集</a></dd>
                    <dd><a href="#" class="a2">李幸倪</a></dd>
                    <dd style="color: 	#A9A9A9;">2021-07-26</dd>
                </dl>
                <dl>
                    <dt><img src="https://y.qq.com/music/photo_new/T002R300x300M000003vszda08avPD_1.jpg?max_age=2592000" alt="">
                        <p class="circle">
                        <p class="triangle"></p>
                        </p>
                    </dt>
                    <dd><a href="#" class="a1">第一个爱人</a></dd>
                    <dd><a href="#" class="a2">江美琪</a></dd>
                    <dd style="color: 	#A9A9A9;">2021-07-27</dd>
                </dl>
            </li>
        </li>
        <li></li>
    </ul>
</body>

</html>